<template>
	<view class="banner-box" v-if="bannerList.length > 0">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500" circular style="border-radius: 16rpx;height:278rpx;" @change="onChange">
			<swiper-item v-for="(item,index) in bannerList" :key="item.id" style="border-radius: 16rpx;">
				<view class="banner-bg" :style="'background-image:url('+item.image+')'"></view>
				<view class="banner-wrap"></view>
				<view class="book-box" @click="handleToRead(item.id)">
					<view class="book-detail">
						<view class="book-info">
							<view class="book-name u-line-1">{{item.name}}</view>
							<view class="book-writer u-line-1">{{item.writer}}著</view>
							<view class="book-new u-line-1" v-if="item.new_chapter">
								最新
								<br />
								{{item.new_chapter}}
							</view>
						</view>
						<u-image class="book-img" width="114rpx" height="152rpx" border-radius="16" :src="item.image" :fade="true" duration="450" mode="cover">
							<u-loading slot="loading"></u-loading>
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
					<view class="book-bottom">
						<view class="book-other">
							<text class="book-over">{{item.is_over}}</text>
							<text class="book-line"></text>
							<text class="book-type">{{item.type}}</text>
						</view>
						<text class="book-index">{{current + 1}}/{{bannerList.length}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "Banner",
		data() {
			return {
				current: 0,
			};
		},
		props: {
			type: Number,
			bannerList: {
				default: [],
				type: [Array, Object]
			}
		},
		methods: {
			onChange(event) {
				this.current = event.target.current;
			},
			handleToRead(id) {
				uni.navigateTo({
				    url: `/pages/detail/detail?id=${id}`
				});
			},
		},
	};
</script>

<style scoped>
	.banner-box {
		margin: 52rpx auto;
		margin-bottom: 97rpx;
		border-radius: 16rpx;
		box-shadow: 0rpx 17rpx 46rpx 0rpx rgba(6, 27, 65, 0.16);
		width: 670rpx;
	}

	.banner-bg {
		height: 278rpx;
		background-repeat: no-repeat;
		background-size: 670rpx 278rpx;
		filter: blur(20rpx);
		border-radius: 16rpx;
		opacity: 0.85;
	}

	.banner-wrap {
		height: 278rpx;
		position: relative;
		bottom: 278rpx;
		left: 0;
		background: #00266b;
		opacity: 0.3;
		border-radius: 16rpx;
	}

	.book-box {
		height: 278rpx;
		position: relative;
		bottom: 556rpx;
		opacity: 0.85;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.book-detail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 32rpx 0rpx 20rpx 0rpx;
		margin: 0 30rpx 0 30rpx;
		border-bottom: 1rpx rgba(255, 255, 255, 0.25) solid;
	}

	.book-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.book-name {
		font-size: 36rpx;
		line-height: 36rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 800;
		color: rgba(255, 255, 255, 0.85);
		margin-top: 4rpx;
	}

	.book-writer {
		font-size: 18rpx;
		/* line-height: 18rpx; */
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.851);
		margin-top: 9rpx;
		margin-left: 2rpx;
	}

	.book-new {
		width: 400rpx;
		font-size: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.65);
		/* line-height: 36rpx; */
		margin-top: 18rpx;
		margin-left: 2rpx;
	}

	.book-img {
		width: 114rpx;
		height: 152rpx;
		border-radius: 12rpx;
	}

	.book-bottom {
		display: flex;
		padding: 18rpx 36rpx 0rpx 30rpx;
		align-items: center;
		justify-content: space-between;
	}

	.book-other {
		display: flex;
		align-items: center;
	}

	.book-over {
		font-size: 18rpx;
		line-height: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
	}

	.book-line {
		float: left;
		width: 2rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 1rpx;
		margin: 0 16rpx;
	}

	.book-type {
		font-size: 18rpx;
		line-height: 18rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
	}

	.book-index {
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.65);
		line-height: 30rpx;
	}
</style>
